<template>
  <div class="app-container" ref="innerContainer">
    <div class="main-container">
          <el-table
            ref="dataTableRef"
            :data="pageData"
            highlight-current-row
            height="200"
            @current-change="handleCurrentChange"
            border
          >
            <el-table-column
              label="序号"
              type="index"
              width="60"
              align="center"
            />

            <el-table-column
              label="生产单号"
              prop="orderId"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              label="工序节点"
              prop="nodeCode"
              align="center"
            ></el-table-column>
            <el-table-column
              label="开始制作时间"
              prop="startTime"
              align="center"
            ></el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="220"
            >
              <template #default="scope">
               
              </template>
            </el-table-column>
          </el-table>
      </div>
      <!--左侧发展阶段选择 end-->
      <div class="button-group">
        <div class="explain-box" ref="explainBox">
          节点图例说明： 表示任务已完成：
          <div class="explain-item success"></div>
          <span class="ml">表示任务正常：</span>
          <div class="explain-item proceed"></div>
          <span class="ml">表示任务延迟：</span>
          <div class="explain-item await"></div>
          <span class="ml">表示任务终止：</span>
          <div class="explain-item danger"></div>
        </div>
      </div>
      <!--蛇形节点任务组件-->
      <nodeSequenceNew
        ref="nodeSequenceComponent"
      />
  </div>
</template>

<script setup lang="ts">
import nodeSequenceNew from "./components/node-sequence-snackLine.vue";

defineOptions({
  name: "SnackLine",
  inheritAttrs: false,
});

const pageData = ref([
  {
    orderId:"1",
    nodeCode:1,
    startTime:"2024-01-01",
  },
  {
    orderId:"2",
    nodeCode:2,
    startTime:"2024-01-01",
  },
  {
    orderId:"3",
    nodeCode:4,
    startTime:"2024-01-01",
  }
])

const nodeSequenceComponent = ref();

const currentRow = ref();

function handleCurrentChange(val?: any) {
  currentRow.value = val;

  nodeSequenceComponent.value.InitializeComponent(
    Number(currentRow.value.nodeCode)
  );
}

onMounted(() => {});
onUnmounted(() => {});

onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  overflow-y: scroll;
}
.main-container {
  width: 100%;
  display: flex;
  flex-direction: column;

  .top-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    .left-container {
      width: 15%;
      display: flex;
      flex-direction: column;
      box-shadow: var(--el-box-shadow-light);
      border: 1px solid var(--el-card-border-color);
      border-radius: var(--el-card-border-radius);
      .item-button {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .item-button-activity {
        background-color: #d1040438;
        color: #d10404;
        font-weight: bold;
        border-right: 2px solid #d10404;
      }
    }
    .right-container {
      width: 85%;
      box-shadow: var(--el-box-shadow-light);
      border: 1px solid var(--el-card-border-color);
      border-radius: var(--el-card-border-radius);
    }
  }
}

.button-group {
  height: 50px;
  display: flex;
  background-color: #fdf9f5;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--el-box-shadow-light);
  border: 1px solid var(--el-card-border-color);
  border-radius: var(--el-card-border-radius);

  .explain-box {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    .explain-item {
      width: 50px;
      height: 25px;
      border-radius: 10px;
    }

    .success {
      background-color: #67c23a !important;
    }

    .await {
      background-color: #e6a23c !important;
    }

    .proceed {
      background-color: #2994ff !important;
    }

    .danger {
      background-color: #f56c6c !important;
    }
  }
}
</style>
